<template>
    <div>
        <h1>vuex2组件：命名空间写法</h1>
    </div>
</template>

<script>
// 计算属性中：mapState、mapGetters
// 方法中：mapMutations、mapActions
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
export default {
    created() {
        // 1 直接操作state
        // 语法：this.$store.state.空间名.isShow
        console.log(this.$store.state.common.isShow);
        // 2. 直接操作mutations
        // 语法：this.$store.commit("空间名/方法名",arg);
        this.$store.commit("common/setIsShow", false);
        // 3. 直接操作actions
        // 语法：this.$store.dispatch("空间名/方法名",arg);
        this.$store.dispatch("common/setIsShowAsync", false);
        // 4. 直接操作getters
        // 语法：this.$store.getters["空间名/getIsShow"]
        // 转变思维：属性中有特殊的“/”，因此最后不能以对象.属性的形式获取
        console.log(this.$store.getters["common/getIsShow"]);
    },
    computed: {
        ...mapState("common", ["isShow"]),
        ...mapGetters("common", ["getIsShow"]),
    },
    methods: {
        ...mapMutations("common", ["setIsShow"]),
        ...mapActions("common", ["setIsShowAsync"]),
    },
};
</script>
